<template>
  <div>
    <div class="row lr">
      <div class="row">
        <h4>生长记录</h4>
        <div style="line-height: 60px; margin-left: 20px">
          <i class="el-icon-arrow-left" @click="right"></i>
          <i class="el-icon-arrow-right" @click="left"></i>
        </div>
      </div>
      <div style="line-height: 60px">
        <el-date-picker
          type="date"
          style="width: 150px"
          placeholder="选择日期"
          v-model="date"
        >
        </el-date-picker>
      </div>
    </div>
    <el-divider></el-divider>
    <div
      v-for="(item, index) in list"
      :class="
        getFormat(item) === activeDate
          ? 'dateshow-card active'
          : 'dateshow-card'
      "
      :key="index"
      @click="getDate(index)"
    >
      <div>
        <div class="week">
          <span>{{ getWeek(item.getDay()) }}</span>
        </div>
        <div class="day">
          <span>{{ item.getDate() }}</span>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DateShow",
  data() {
    return {
      date: null,
      list: [],
      activeDate: null,
    };
  },
  methods: {
    getDate(index) {
      this.activeDate = this.getFormat(this.list[index]);
      this.date=this.list[index];
      this.$emit("click", this.list[index]);
    },

    getFormat(d) {
      return this.dateFormat("YYYY-mm-dd", d);
    },
    right() {
      let min = new Date(this.list[0]);
      let ll = Object.assign(this.list, []);
      min.setDate(min.getDate() - 1);
      ll.unshift(min);
      if (ll.length > 7) {
        ll.pop();
      }
      this.list = ll;
    },

    left() {
      let max = new Date(this.list[this.list.length - 1]);
      let ll = Object.assign(this.list, []);
      max.setDate(max.getDate() + 1);

      ll.push(max);

      if (ll.length > 7) {
        ll.shift();
      }
      this.list = ll;
    },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),
        "m+": (date.getMonth() + 1).toString(),
        "d+": date.getDate().toString(),
        "H+": date.getHours().toString(),
        "M+": date.getMinutes().toString(),
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    getWeek(w) {
      switch (w) {
        case 0:
          return "周日";

        case 1:
          return "周一";

        case 2:
          return "周二";

        case 3:
          return "周三";

        case 4:
          return "周四";

        case 5:
          return "周五";

        case 6:
          return "周六";
      }
    },
    initDate(d) {
      this.date = d;
      let dd=new Date(d);
      this.activeDate = this.getFormat(this.date);
      let w = this.date.getDay();
      let nd = dd.setDate(dd.getDate() + (6 - w));
      let l = [];
      for (let i = 6; i >= 0; i--) {
        let d = new Date(nd);
        d.setDate(d.getDate() - i);
        l.push(d);
      }
      this.list = l;
    },
  },
  watch:{
    date:{
      handler(val){
        this.initDate(val)
      },
      deep:true
    }
  },
  computed: {
  },
  mounted() {
    this.initDate(new Date())
  },
};
</script>

<style>
.dateshow-card {
  display: inline-block;
  text-align: center;
  width: 40px;
  margin: 0 5px;
  height: 60px;
  padding: 5px 0;
  cursor: pointer;
}

.dateshow-card:hover {
  background-color: #64b5f6;
  border-radius: 10px;
  color: #fff;
}

.dateshow-card:hover .week {
  color: #fff;
}

.dateshow-card:hover .day {
  color: #fff;
}

.active {
  background-color: #64b5f6;
  border-radius: 10px;
  color: #fff;
}

.active .week {
  color: #fff;
}

.active .day {
  color: #fff;
}

.week {
  padding-top: 5px;
  font-size: 12px;
  color: #00000061;
}

.day {
  padding: 10px;
  font-size: 16px;
  color: #000000de;
  font-weight: bold;
}
</style>